<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h2>模板语法</h2>
      <!-- 使用双大括号将data的数据绑定到页面上 -->
      <!-- 除了undefined和null以外，所有的数据都可以用双大括号直接显示(转成字符串显示) -->
      <p>count: {{ count }}</p>
      <p>msg: {{ msg }}</p>
      <p>show: {{ show }}</p>
      <p>udf: {{ udf }}</p>
      <p>nl: {{ nl }}</p>
      <p>obj: {{ obj }}</p>
      <p>arr: {{ arr }}</p>

      <!-- 如果要将内容使用标签的方式显示，可以使用v-html的指令 -->
      <!-- 只能对信得过的内容使用，避免xss攻击 -->
      <p>content: {{ content }}</p>
      <div v-html="content"></div>

      <!-- 变量如果要用在属性中，需要使用v-bind指令 -->
      <!-- v-bind指令可以简写成: -->
      <div v-bind:title="title">hello</div>
      <img :src="url" alt="" />

      <!-- 属性值如果是布尔值的，那么vue会做处理，如果是true有这个属性，如果是false就移除这个属性 -->
      <button v-on:click="fn" :disabled="disabled">btn</button>

      <!-- v-bind可以直接赋值对象，会将对象的各个属性添加到元素上面 -->
      <div v-bind="objectOfAttrs"></div>
      <div :class="objectOfAttrs.class" :id="objectOfAttrs.id"></div>
    </div>

    <script src="./lib/vue3.js"></script>
    <script>
      const { createApp } = Vue;

      createApp({
        data() {
          return {
            count: 1,
            msg: "hello vue!",
            show: false,
            udf: undefined,
            nl: null,
            obj: { a: 3, b: 4 },
            arr: [1, 2, 3, 4],

            content: "<h1>标题</h1>",

            title: "title2",
            url: "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",

            disabled: false,

            objectOfAttrs: {
              id: "container",
              class: "wrapper",
            },
          };
        },
        // methods表示方法，里面写事件处理函数
        methods: {
          fn() {
            this.count++;
          },
        },
      }).mount("#app");
    </script>
  </body>
</html>
